<template>
	<view class="page">
		<view class="add">
			<text>新增特色课</text>
		</view>
		<view class="selectxq">
			<view class="selectxq_left">
				<view class="selectxq_left1">

				</view>
				<text>分享学期</text>
			</view>

			<view class="selectxq_right">
				<picker @change="pick($event)" mode='selector' :value="index" :range="list" class='xqpicker'>
					<view>{{list[index]||"春季学期"}}></view>
				</picker>
			</view>
		</view>
		<!-- 列表 -->
		<view class="class" v-for="(item,index) in classlist">
			<view class="class_left">
				<image src="../../../static/my/shoplogo.png" mode=""></image>
			</view>
			<view class="class_right">
				<view class="class_right1">
					<text>{{item.title}}</text>
					<image src="../../../static/school/zs1.png" mode="" @click="up(item)"></image>
				</view>
				<view class="update" v-show="item.status">
					<view class="c1">
						<view class="c1_up">
							<text>修改</text>
						</view>
						<view class="c1_de">
							<text>删除</text>
						</view>
						<view class="c2">
						</view>
					</view>
				</view>

				<view class="class_right2">
					<text>{{item.supplier}}</text>
				</view>
				<view class="class_right3">
					全部课时:<text>{{item.classperiod}}</text> 节
				</view>

				<view class="class_right3">
					总价格:<text>{{item.price}}</text> 元
				</view>
			</view>
		</view>

		<!-- 启用 -->
		<view class="de">
			<view class="de1">
				<text>启动课程包</text>
				<switch color="#1D8CFF" checked @change="switch1Change" />
			</view>
			<view class="de2">
				<button type="default">删除活动</button>
			</view>
		</view>

		<view class="xz">
			<view class="xz1" v-for="(item,index) in xzlist" @click="xzchange(item.id)"
				:style="{background:a==item.id?'#146DF4':'',color:a==item.id?'#FFFFFF':''}">
				<text>{{item.title}}</text>
			</view>
		</view>


		<view class="price">
			<view class="price1">
				入园价格总价: <text>12</text> 节
			</view>
			<view class="price1">
				零售价格总价: <text>12</text> 元
			</view>
		</view>

		<view class="price">
			<view class="price1">
				入园价格总价: <text>12</text> 节
			</view>
			<view class="price1">
				零售价格总价: <text>12</text> 元
			</view>
		</view>
		<view class="price">
			<view class="price1">
				入园价格总价: <text>12</text> 节
			</view>
			<view class="price1">
				零售价格总价: <text>12</text> 元
			</view>
		</view>
		<view class="price">
			<view class="price1">
				入园价格总价: <text>12</text> 节
			</view>
			<view class="price1">
				零售价格总价: <text>12</text> 元
			</view>
		</view>

		<view class="bottom">
			<view class="bt1">
				<button type="default">提交</button>
			</view>
			<view class="bt2">
				<button type="default">分享链接</button>
			</view>
			<view class="bt3">
				<button type="default">分享二维码</button>
			</view>
		</view>

		<view class="bg" v-show="njshow">
			<view class="bgone">

			</view>
			<view class="bgtwo">
				<view class="njtitle">
					<text>请选择您的年级</text>
				</view>
				<view class="njlist">
					<view class="njlist1" v-for="(item,index) in njlist" @click="njchange(item.id)" :style="{border:b==item.id?'2rpx solid #1D8CFF':''}">
						<text>{{item.title}}</text>
					</view>
					<view class="njbt">
						<button type="default">确认</button>
					</view>
				</view>
			</view>
			<view class="gb" @click="gbnj()">
				<image src="../../../static/school/gb.png" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['', '娜可露露', '小乔', '妲己', '盾山', '蔡文姬'],
				index: 0,
				a: 0,
				b:0,
				njshow:false,
				classlist: [{
						status: false,
						id: 0,
						title: 'A课程名',
						supplier: 'A供应商',
						classperiod: '11',
						price: 20,
					},
					{
						status: false,
						id: 1,
						title: 'A课程名',
						supplier: 'A供应商',
						classperiod: '11',
						price: 20,

					}
				],
				xzlist: [{
						id: 0,
						title: '校园'
					},
					{
						id: 1,
						title: '年级'
					},
					{
						id: 2,
						title: '班级'
					}
				],
				njlist:[
					{
						id:0,
						title:'一年级'
					},
					{
						id:1,
						title:'二年级'
					},
					{
						id:2,
						title:'三年级'
					},
					{
						id:3,
						title:'四年级'
					},
					{
						id:4,
						title:'五年级'
					},
					{
						id:5,
						title:'六年级'
					}
				]
			}
		},
		methods: {
			pick(e) {
				this.index = e.target.value;
			},
			up(item) {
				item.status = !item.status
			},
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
			},
			xzchange(id) {
				this.a = id
				console.log(this.a)
				if(this.a===1){
					this.njshow=true
				}
			},
			njchange(id){
				this.b=id
				
			},
			gbnj(){
				this.njshow=!this.njshow
			}
			
		}
	}
</script>

<style>
	.page {
		width: 750rpx;

		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding-top: 32rpx;

	}

	.add {
		width: 690rpx;
		height: 88rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 3rpx solid #3498FF;
		margin: auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #3498FF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.selectxq {
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: 32rpx;
	}

	.selectxq_left {
		display: flex;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-left: 32rpx;
	}

	.selectxq_left1 {
		width: 8rpx;
		height: 32rpx;
		background: #188AFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-right: 10rpx;
	}

	.selectxq_right {
		margin-left: auto;
		margin-right: 32rpx;
	}

	.xqpicker {
		width: 184rpx;
		height: 56rpx;

		background: #3498FF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.class {
		width: 690rpx;
		height: 288rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 12rpx 20rpx 0rpx rgba(158, 158, 158, 0.04);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		margin: 32rpx auto 0;
	}

	.class_left {
		margin-left: 28rpx;
	}

	.class_left image {
		width: 216rpx;
		height: 216rpx;
	}

	.class_right {
		height: 216rpx;
		width: 100%;
		margin-left: 32rpx;
	}

	.class_right1 {
		display: flex;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.class_right1 image {
		width: 70rpx;
		height: 40rpx;
		margin-left: auto;
		margin-right: 32rpx;
	}


	.update {
		width: 170rpx;
		height: 104rpx;
		background-color: #FFFFFF;
		margin-left: auto;
		z-index: auto;
		position: absolute;
		right: 32rpx;
		margin-top: 20rpx;

	}

	.c1 {
		position: relative;
		width: 170rpx;
		height: 104rpx;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		align-items: center;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(150, 150, 150, 0.2);
		border-radius: 2rpx 2rpx 2rpx 2rpx;
	}

	/* 实现小三角 */
	.c2 {
		/* 绝对定位 */
		position: absolute;
		/* 此处的“20”为了实现移动到小三角的盒子以外的位置调整的 */
		top: -20px;
		/* 为了实现居中 */
		right: 40rpx;
		margin-right: -10px;
		/* 实现小三角 */
		width: 0;
		height: 0;
		/* 将四个边的框都隐藏显示 */
		border: 10px solid transparent;
		/* 指定要显示的边的颜色 */
		border-bottom-color: #FFFFFF;
	}

	.c1_up {
		display: flex;
		justify-content: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 8rpx;
		border-bottom: 2rpx solid #F0F0F0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
	}

	.c1_de {
		display: flex;
		justify-content: center;
		margin-top: 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FF5858;
	}

	.class_right2 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-top: 16rpx;
	}

	.class_right3 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		margin-top: 16rpx;
	}

	.class_right3 text {
		ont-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #666666;

	}

	.de {
		display: flex;
		margin-top: 32rpx;
		align-items: center;
	}

	.de1 {
		margin-left: 32rpx;
	}

	.de1 text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-right: 16rpx;
	}

	.de2 {
		margin-left: auto;
		margin-right: 32rpx;
	}

	.de2 button {
		width: 176rpx;
		height: 72rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 3rpx solid #3498FF;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #3498FF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xz {
		width: 690rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		margin: 40rpx auto 0;
	}

	.xz1 {
		width: 216rpx;
		height: 64rpx;

		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin: auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.price {
		width: 690rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 24rpx auto 0;
		display: flex;
		align-items: center;
	}

	.price1 {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;

	}

	.price1 text {
		height: 60rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #666666;

	}

	.bottom {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: sticky;
		bottom: 0;
		z-index: auto;
		margin-top: 30rpx;
		display: flex;
		align-items: center;

	}

	.bt1 button {
		width: 184rpx;
		height: 80rpx;
		background: #1D8CFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-left: 52rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bt2 button {
		width: 184rpx;
		height: 80rpx;
		background: #4461D9;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-left: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bt3 button {
		width: 216rpx;
		height: 80rpx;
		background: #4DC9FF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-left: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bg {}

	.xzbj {
		width: 626rpx;
		height: 540rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

	}

	.bgone {
		background-color: #000000;
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 9;
		top: 0;
		opacity: 0.8;
	}

	.bgtwo {
		width: 626rpx;
		height: 688rpx;
		background: linear-gradient(179deg, #93C8FF 0%, #FFFFFF 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		position: fixed;
		z-index: 9;
		top: 0;
		margin: 300rpx 62rpx 0 62rpx;

	}

	.njtitle {
		margin-top: 48rpx;
		display: flex;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.njlist{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.njlist1{
		width: 256rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin: 40rpx 26rpx 0 ;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
	}

	.gb image {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		z-index: 9;
		top: 1050rpx;
		left: 336rpx;
	}
	.njbt{
		margin: 48rpx auto 0;
	}
	.njbt button{
		width: 532rpx;
		height: 80rpx;
		background: #1D8CFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>